<template>
  <div>
    <el-dialog
      :title="jbFlag ? '选择设备' : '参数配置'"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <div v-show="jbFlag">
        <template>
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="设备名称" prop="devName">
              <el-input v-model="form.devName"></el-input>
            </el-form-item>
            <el-form-item label="设备sn号" prop="imei">
              <el-input v-model="form.imei"></el-input>
            </el-form-item>
          </el-form>
        </template>
        <template>
          <el-table
            :data="groupData"
            height="300"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            v-loading="loading"
          >
            <el-table-column width="180">
              <template slot-scope="scope">
                <el-radio v-model="form.TypeID" :label="scope.row.typeID">{{
                  ""
                }}</el-radio>
              </template>
            </el-table-column>
            <el-table-column prop="groupName" label="名称"> </el-table-column>
            <el-table-column prop="note" label="设备类型"> </el-table-column>
            <el-table-column prop="typeID" label="ID"> </el-table-column>
          </el-table>
        </template>
      </div>
      <div v-show="!jbFlag">
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <div class="dasljdkas">
            <div
              @click="getGroupLis(item.index)"
              :index="item.index"
              v-for="(item, index) in menuData"
              :key="index"
              class="yl"
              :class="getGroupLisFlag == item.index ? 'sdo' : 'bso'"
            >
              {{ item.name }}
            </div>
          </div>
          <!-- <el-radio
            v-model="cycsFlag"
            :label="true"
            @click.native.prevent="change(cycsFlag)"
          >
            常用参数
          </el-radio> -->
        </div>
        <el-checkbox-group
          v-model="defDatacheck"
          @change="handleCheckedCitiesChange"
        >
          <template>
            <el-table
              :data="getGroupLisFlag == 1 ? defData1 : defData2"
              height="300"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column label="通道">
                <template slot-scope="scope">
                  <el-checkbox :label="scope.row">{{ "" }}</el-checkbox>
                </template>
              </el-table-column>
              <el-table-column prop="paraNo1" label="序号"> </el-table-column>
              <el-table-column prop="paraName" label="名称"> </el-table-column>

              <el-table-column label="报警级别">
                <template slot-scope="scope">
                  <el-dropdown @command="warnGradeFun">
                    <span class="el-dropdown-link">
                      {{ warnGradeData[scope.row.warnGrade].name
                      }}<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item
                        :command="{
                          item: item,
                          index: scope.$index,
                        }"
                        v-for="(item, index) in warnGradeData"
                        :key="index"
                      >
                        {{ item.name }}
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
              </el-table-column>
              <el-table-column
                prop="warnType"
                label="告警电平"
                v-if="getGroupLisFlag == 1"
              >
              </el-table-column>

              <el-table-column
                v-if="getGroupLisFlag == 2"
                prop="sign"
                label="单位"
              >
              </el-table-column>
              <el-table-column
                v-if="getGroupLisFlag == 2"
                prop="paraIniValue"
                label="提醒下限"
              >
              </el-table-column>
              <el-table-column
                v-if="getGroupLisFlag == 2"
                prop="paraMinValue"
                label="下限"
              >
              </el-table-column>
              <el-table-column
                v-if="getGroupLisFlag == 2"
                prop="paraMaxValue"
                label="上限"
              >
              </el-table-column>

              <el-table-column label="详细描述" width="180">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.note"></el-input>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-checkbox-group>
      </div>
      <span slot="footer" class="dialog-footer" v-show="jbFlag" v-if="flag">
        <el-button type="primary" @click="jbfun">下一步</el-button>
      </span>
      <span slot="footer" class="dialog-footer" v-show="!jbFlag">
        <el-button @click="syb" v-if="flag">上一步</el-button>
        <el-button type="primary" @click="formpost">保存设备</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  ListDef,
  listGroup,
  ListPud,
  addDev,
  putdevlist,
  putDev,
} from "@/api/system/imei";
export default {
  data() {
    return {
      rules: {
        imei: [
          { required: true, message: "设备sn号不能为空", trigger: "blur" },
        ],
        devName: [
          { required: true, message: "设备名称不能为空", trigger: "blur" },
        ],
      },
      jbFlag: true,
      dialogVisible: false,
      activeIndex: "1",
      menuData: [
        {
          name: "遥信量",
          index: "1",
        },
        {
          name: "遥测量",
          index: "2",
        },
      ],
      warnGradeData: [
        {
          name: "屏蔽",
          index: 0,
        },
        {
          name: "一般",
          index: 1,
        },
        {
          name: "重要",
          index: 2,
        },
        {
          name: "紧急",
          index: 3,
        },
      ],
      defData1: [],
      defData2: [],
      defDatacheck: [],
      groupData: [],
      groupFlag: "",
      loading: true,
      getGroupLisFlag: 1,
      cycsFlag: false,
      form: {},
      flag: true,
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    syb() {
      this.jbFlag = true;
      let form = JSON.parse(
        JSON.stringify({
          TypeID: this.form.TypeID,
          imei: this.form.imei,
          devName: this.form.devName,
        })
      );
      this.form = {};
      this.form = form;
      console.log(form);
    },
    init(formdata, flag) {
      console.log("flag", flag);
      this.flag = true;
      this.form = {};
      this.form.regionName = formdata.regionName;
      this.form.flastId = formdata.flastId;
      this.dialogVisible = true;
      this.jbFlag = true;
      this.cycsFlag = false;

      this.defDatacheck = [];
      this.getGroupLisFlag = 1;
      this.activeIndex = "1";
      console.log("adsads", this.activeIndex);

      this.$forceUpdate();

      if (flag) {
        this.flag = false;
        this.jbFlag = false;
        this.form = formdata;
        console.log("form", this.form);
        this.form.TypeID = this.form.typeID;
        this.form.devId = this.form.devID;
        putdevlist(this.form.devID).then((res) => {
          console.log("res", res);
        });

        this.jbfun2();
      } else {
        listGroup().then((res) => {
          this.groupData = res.rows;
          this.loading = false;
        });
      }
    },
    jbfun() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.TypeID) {
            this.loading = true;
            this.jbFlag = false;
            ListDef({ TypeID: this.form.TypeID, ParaType: 1 }).then((res) => {
              console.log(312, res);
              this.defData1 = res.rows;
              this.loading = false;
              
              ListDef({ TypeID: this.form.TypeID, ParaType: 2 }).then((res) => {
                console.log(999, res);
                this.defData2 = res.rows;
                this.defDatacheck = [...this.defData1,...this.defData2]
                this.loading = false;
              });
            });
          } else {
            this.$message({
              message: "请选择一个设备",
              type: "warning",
            });
          }
        }
      });
    },
    jbfun2(){
      if (this.form.TypeID) {
            this.loading = true;
            this.jbFlag = false;
            ListDef({ TypeID: this.form.TypeID, ParaType: 1 }).then((res) => {
              console.log(312, res);
              this.defData1 = res.rows;

              this.defData1.forEach((item, index) => {
                this.form.devparastructs.forEach((ite) => {
                  if (item.id == ite.id) {
                    this.defDatacheck.push(item);
                  }
                });
              });
              this.loading = false;
              console.log(3213);
              ListDef({ TypeID: this.form.TypeID, ParaType: 2 }).then((res) => {
                console.log(999, res);
                this.defData2 = res.rows;
                this.loading = false;
                this.defData2.forEach((item, index) => {
                  this.form.devparastructs.forEach((ite) => {
                    if (item.id == ite.id) {
                      this.defDatacheck.push(item);
                    }
                  });
                });
              });
            });
          } else {
            this.$message({
              message: "请选择一个设备",
              type: "warning",
            });
          }
    },
    change(value) {
      this.cycsFlag = value === true ? false : true;
    },
    warnGradeFun(e) {
      console.log(e);
      if (this.getGroupLisFlag == 1) {
        this.defData1[e.index].warnGrade = e.item.index;
      } else {
        this.defData2[e.index].warnGrade = e.item.index;
      }
    },
    handleSelect(e) {
      console.log(e);
    },
    getGroupLis(index) {
      this.getGroupLisFlag = index;
    },
    handleSelectionChange(e) {
      console.log(e);
    },
    handleCheckedCitiesChange() {
      console.log(this.defDatacheck);
    },
    formpost() {
      // this.form.imei = this.groupFlag
      this.form.devparastructs = this.defDatacheck;
      // TypeID;
      console.log(this.form);
      if (this.flag) {
        addDev(this.form).then((res) => {
          this.$message({
            message: "新增成功",
            type: "success",
          });
          this.dialogVisible = false;
          this.$emit("fanhuia");
        });
      } else {
        putDev(this.form).then((res) => {
          console.log(321, res);
          this.$message({
            message: "更新",
            type: "success",
          });
          this.dialogVisible = false;
          this.$emit("fanhuia");
        });
      }
    },
  },
};
</script>
<style>
.dasljdkas {
  display: flex;
}
.yl {
  padding: 20px;
}
.sdo {
  border-bottom: 2px solid #1890ff;
}
</style>